<template>
  <div class="big">
    <!-- 首框 -->
    <div class="order-header">
      <el-card shadow="always">
        <div>
          <el-icon><Search /></el-icon>筛选搜索
          <el-button
            type="primary"
            style="float: right; margin-left: 20px"
            @click="searchButton"
            >查询搜索</el-button
          >
          <el-button style="float: right" @click="reset">重置</el-button>
        </div>

        <br />

        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="输入搜索:">
            <el-input
              v-model="formInline.orderSn"
              placeholder="订单编号"
              width="120px"
            />
          </el-form-item>

          <el-form-item label=" &nbsp;收货人:"
            ><el-input
              v-model="formInline.receiverKeyword"
              placeholder="收货人"
            />
          </el-form-item>

          <el-form-item label="提交时间:">
            <el-date-picker
              v-model="formInline.createTime"
              type="date"
              clearable
              placeholder="请选择时间"
            />
          </el-form-item>

          <el-form-item label="订单状态:">
            <el-select v-model="formInline.status" clearable placeholder="全部">
              <el-option label="待付款" :value="0" />
              <el-option label="待发货" :value="1" />
              <el-option label="已发货" :value="2" />
              <el-option label="已完成" :value="3" />
              <el-option label="已关闭" :value="4" />
              <el-option label="无效订单" :value="5" />
            </el-select>
          </el-form-item>

          <el-form-item label=" 订单分类:">
            <el-select
              v-model="formInline.orderType"
              clearable
              placeholder="全部"
            >
              <el-option label="正常订单" :value="0" />
              <el-option label="秒杀订单" :value="1" />
            </el-select>
          </el-form-item>

          <el-form-item label=" 订单来源:">
            <el-select
              v-model="formInline.sourceType"
              clearable
              placeholder="全部"
            >
              <el-option label="PC订单" :value="0" />
              <el-option label="app订单" :value="1" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 数据列表框 -->
    <div class="order-box-card">
      <el-card>
        <el-icon><Tickets /></el-icon>数据列表
      </el-card>
    </div>

    <!-- 操作框 -->
    <div class="order-data_box">
      <el-table ref="multipleTableRef" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column label="Date" width="120">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="id" label="编号" width="100" />
        <el-table-column prop="orderSn" label="订单编号" width="200" />
        <el-table-column prop="nickName" label="提交时间" width="200" />
        <el-table-column prop="email" label="用户账号" width="150" />
        <el-table-column
          prop="payAmount"
          label="订单金额"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="payType"
          label="支付方式"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="sourceType"
          label="订单来源"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="订单状态"
          width="150"
        ></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
        </el-table-column>
      </el-table>
    </div>

    <!-- 底部框 -->
    <div class="order-bottom">
      <div>
        <el-select v-model="formInline.ids" placeholder="批量操作">
          <el-option label="批量发货" value="batch" />
          <el-option label="关闭订单" value="close" />
          <el-option label="删除订单" value="del" />
        </el-select>
        <el-button type="primary" style="margin-left: 10px">确定</el-button>
      </div>
      <!-- 分页器 -->
      <div>
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as order from "@/request/modules/order";
import useTable from "@/hooks/useTable";
// 引入图标
import { Search, Calendar, Tickets } from "@element-plus/icons-vue";
import { reactive, ref, type Ref } from "vue";
import type { getSearchListParams } from "@/types/global";
import { ElMessage } from "element-plus";

const formInline = reactive<getSearchListParams>({
  pageNum: 1,
  pageSize: 10,
});

// 封装的查询订单请求
let {
  tableList,
  pagination,
  handleSizeChange,
  handleCurrentChange,
  fetchData,
} = useTable(order.searchListAPI, formInline);


// 查询搜索
const searchButton = () => {
  fetchData();
  console.log(123);
};

let currentPage4 = ref(1);
let pageSize4 = ref(1);

// 重置
const reset = () => {
  (formInline.createTime = ""),
    (formInline.orderSn = ""),
    (formInline.orderType = undefined),
    (formInline.pageNum = 1),
    (formInline.pageSize = 10),
    (formInline.receiverKeyword = ""),
    (formInline.sourceType = undefined),
    (formInline.status = undefined);
};

// 批量删除
// const onSubmit = () => {
//   tableData.value.map((item) => {
//     formInline.ids = item.id;
//   });
//   order.orderDelete(formInline.ids).then((res) => {
//     if (res.code == 200) {
//       ElMessage.success("删除成功");
//     } else {
//       ElMessage.error("删除失败");
//     }
//   });
// };
</script>

<style lang="less" scoped>
.el-card {
  margin: 20px;
}
.big {
  .order-header {
    font-size: 14px;
    .el-card {
      margin: 20px;
      .el-input {
        width: 203px;
      }
      .el-select {
        width: 203px;
      }
    }
  }
  .order-data_box {
    margin: 20px;
    font-size: 12px;
    width: 1100px;
    overflow-x: auto;
  }
  .order-bottom {
    margin: 20px;
    display: flex;
    justify-content: space-between;
    .el-select {
      width: 203px;
    }
  }
}
</style>
